<template>
    <div>
        <!--顶层工具栏容器-->
        <div style="display: flex;justify-content: space-between">
        <div>
            <el-input prefix-icon="el-icon-search" placeholder="请输入员工姓名进行搜索......." style="width: 300px;margin-right: 10px"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary">
                <i class="fa fa-angle-double-down"></i>高级搜索
            </el-button>
        </div>
        <div>
            <el-button type="success">
                <i class="fa fa-level-up" aria-hidden="true"></i>导入数据
            </el-button>
            <el-button type="success">
                <i class="fa fa-level-down" aria-hidden="true"></i>导出数据
            </el-button>
            <el-button type="primary" icon="el-icon-plus">添加员工</el-button>
        </div>
        </div>
        <!--数据表格容器-->
        <div style="margin-top: 10px;">
            <el-table
                    :data="empData"
                    v-loading="loading"
                    element-loading-text="正在加载员工数据..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        fixed
                        align="left"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        align="left"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="politicsstatus.name"
                        label="政治面貌">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        align="left"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="100"
                        align="left"></el-table-column>
                    <el-table-column
                            prop="address"
                            label="联系地址"
                            align="left"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="department.name"
                            label="所属部门"
                            width="100"
                            align="left"></el-table-column>
                        <el-table-column
                                prop="position.name"
                                label="职位"
                              width="100">
                        </el-table-column>
                        <el-table-column
                                prop="jobLevel.name"
                                label="职称"
                                width="100">
                        </el-table-column>
                            <el-table-column
                                    prop="engageForm"
                                    label="聘用形式"
                                    align="left"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="beginDate"
                                    label="入职日期"
                                    width="85"
                                    align="left">
                            </el-table-column>
                                <el-table-column
                                        prop="conversionTime"
                                        label="转正日期"
                                        align="left"
                                        width="85">
                                </el-table-column>
                                <el-table-column
                                            prop="beginContract"
                                            label="合同起始日期"
                                            width="95"
                                            align="left">
                                </el-table-column>
                                    <el-table-column
                                            prop="endContract"
                                            label="合同终止日期"
                                            align="left"
                                            width="95">
                                    </el-table-column>
                                    <el-table-column
                                            prop="contractTerm"
                                            label="合同期限"
                                            width="70"
                                            align="left">
                                    </el-table-column>
                                    <el-table-column
                                            prop="tiptopDegree"
                                            label="最高学历"
                                            width="70"
                                            align="left">
                                    </el-table-column>
                                    <el-table-column
                                            label="操作" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button size="mini">编辑</el-button>
                                            <el-button size="mini" type="primary">查看高级资料</el-button>
                                            <el-button size="mini" type="danger">删除</el-button>
                                        </template>
                                    </el-table-column>

            </el-table>
        </div>
        <!--分页工具栏容器-->
        <div class="block">

                <el-pagination
                        layout="prev, pager, next, jumper, ->, total"
                        :total="empTotal">
                </el-pagination>
            </div>

    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data(){
            return{
                empData:[],
                loading:false,
                empTotal:0//员工总数
            }
        },
        mounted() {
            this.initEmployee();
        },
        methods:{
            initEmployee(){
                this.loading=true;
                this.getRequest("/emp/basic/").then(resp=>{
                    this.loading=false;
                    if(resp)
                    {
                        this.empData=resp.dataRow;
                        this.empTotal=resp.totalCount;
                    }
                })
            }
        }
    }
</script>

<style >

</style>